<template>
	<view class="area">
		<view class="area__head">
			<view class="opers" @tap="closeArea('close')">取消</view>
			<view class="opers cor" @tap="closeArea('ok')">确定</view>
		</view>
		<picker-view :value="value" indicator-style="height:44px;" class="area-picker" @change="bindChange">
			<picker-view-column>
				<view class="area_item" v-for="(item,index) in areaInfo.provinceArray" :key="index">{{item.name}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="area_item" v-for="(item,index) in areaInfo.cityArray" :key="index">{{item.name}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="area_item" v-for="(item,index) in areaInfo.districtArray" :key="index">{{item.name}}</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: [],
				areaInfo: {
					provinceArray: [],
					cityArray: [],
					districtArray: [],
				},
				areaArrList: {}
			}
		},
		onLoad(e) {
			this.getArea();
		},
		methods: {
			getArea() {
				let t = this,
					param = {},
					areaArray = uni.getStorageSync('area') || '';
				if (areaArray) {
					t.areaInfo.provinceArray = areaArray.area;
					t.areaInfo.cityArray = t.areaInfo.provinceArray[0].list;
					t.areaInfo.districtArray = t.areaInfo.cityArray[0].list;
					//获取ID
					t.areaArrList.province = t.areaInfo.provinceArray[0];
					t.areaArrList.city = t.areaInfo.cityArray[0];
					t.areaArrList.district = t.areaInfo.districtArray[0];
				} else {
					param.url = "index/area";
					param.data = {};
					t.util.requests(param, res => {
						uni.setStorageSync('area', res.data.data);
						t.areaInfo.provinceArray = res.data.data.area;
						t.areaInfo.cityArray = t.areaInfo.provinceArray[0].list;
						t.areaInfo.districtArray = t.areaInfo.cityArray[0].list;
						//获取ID
						t.areaArrList.province = t.areaInfo.provinceArray[0];
						t.areaArrList.city = t.areaInfo.cityArray[0];
						t.areaArrList.district = t.areaInfo.districtArray[0];
					});
				}
			},
			bindChange(e) {
				let t = this;
				const array = e.detail.value;
				t.areaInfo.cityArray = t.areaInfo.provinceArray[array[0]].list;
				t.areaInfo.districtArray = t.areaInfo.cityArray.length > 1 ? t.areaInfo.cityArray[array[1]].list : t.areaInfo
					.cityArray[0].list;
				//获取省市区对象传给父组件
				t.areaArrList.province = t.areaInfo.provinceArray[array[0]];
				t.areaArrList.city = t.areaInfo.cityArray[array[1]];
				t.areaArrList.district = t.areaInfo.districtArray[array[2]];
				array[1] = 0;
				array[2] = 0;
				t.value = array;
			},
			closeArea(type) {
				let t = this;
				t.$emit("getAreaList", t.areaArrList, type);
			}
		}
	}
</script>
